<template>
  <div class="jouneryOrder">
    <ul>
      <li v-for="(item, key) in mylist">
        <div class="data" @click="displayDetail(item, key)">
          <span>预定日期：{{item.date}}</span>
          <span>{{item.orderStatus}} <i class="icon icon-arrow-bottom" v-bind:class="{top:item.isshow}"></i> </span>
        </div>
        <div class="arealist" v-bind:class="{active:item.isshow}">
          <div class="part_one">
            <p class="title">订单详情</p>
            <div class="part_one_fir">
              <p>订单号：{{item.orderNo}}</p>
              <p>{{item.orderName}}</p>
            </div>
            <div class="part_one_fir">
              <p>订单金额：<span class="redclolr">￥{{item.orderAmount}}</span></p>
              <p>出发城市：{{item.setOff}}</p>
              <p>出发时间：{{item.startDate}}</p>
              <p>归来时间：{{item.endDate}}</p>
              <p>出游人数：{{item.peoplenumber}}</p>
            </div>
          </div>
          <div class="part_one">
            <p class="title">机票信息</p>
            <div class="part_one_fir">
              <p class="placeDesc"><span class="span-icon">去</span>{{item.startDate}}丨{{item.setOff}}-{{item.destination}}
              </p>
              <div class="flex">
                <div>
                  <p class="time">{{item.tickets.go.time}}</p>
                  <p class="timePlace">{{item.tickets.go.place}}</p>
                </div>
                <i class="icon"></i>
                <div>
                  <p class="time">{{item.tickets.go.arrivetime}}</p>
                  <p class="timePlace">{{item.tickets.go.arrivePlace}}</p>
                </div>
              </div>
              <p class="flight text-center">{{item.tickets.go.flight}}</p>
            </div>
            <div class="part_one_fir">
              <p class="placeDesc"><span class="span-icon">返</span>{{item.endDate}}丨{{item.destination}}-{{item.setOff}}
              </p>
              <div class="flex">
                <div>
                  <p class="time">{{item.tickets.arrive.time}}</p>
                  <p class="timePlace">{{item.tickets.arrive.place}}</p>
                </div>
                <i class="icon"></i>
                <div>
                  <p class="time">{{item.tickets.arrive.arrivetime}}</p>
                  <p class="timePlace">{{item.tickets.arrive.arrivePlace}}</p>
                </div>
              </div>
              <p class="flight text-center">{{item.tickets.arrive.flight}}</p>
            </div>
          </div>
          <div class="part_one">
            <p class="title">身份信息</p>
            <div class="part_one_fir " v-for="(people, key2) in item.peoples">
              <p>姓名：{{people.name}}</p>
              <p>手机号：{{people.tel}}</p>
              <p>身份证：{{people.identify}}</p>
            </div>
          </div>
          <div class="part_one">
            <p class="title">备注</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {ctoast, confirmDialog} from '../../common/js/common'
  export default ({
    data () {
      return {
        'mylist': []
      }
    },
    mounted () {
      this.getList()
    },
    computed: {},
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      getList () {
        let result = HttpRequest(linklist.myorder_jounery)
        result.then((response) => {
          if (response.status === 200) {
            this.mylist = response.body ? response.body : []
            this.mylist.map((value, key, array) => {
              value.isshow = false
            })
          }
        }, (response) => {

        }).catch((response) => {

        })
      },
      displayDetail (item, key) {
        item.isshow = !item.isshow
        this.mylist.splice(key, 1, item)
        console.log('fff', this.mylist)
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  .arealist
    overflow hidden
    height 0
    transition all 0.3s ease-in
    &.active
      height 100%
      transition all 0.3s ease-in
    .part_one
      border bordercolor
      &:first-child
        border-top none

  .redclolr
    color #ff5a00

  .icon
    background-position -0rem -3.05rem
    &.icon-arrow-bottom
      height cal(30) rem
      background-position -0.2rem -6.3rem
      &.top
        background-position -0.2rem -7.05rem

  .jouneryOrder
    padding-left cal(20) rem
    padding-right cal(20) rem
    overflow-y auto
    position fixed
    width 100%
    height 100%
    padding-bottom 1rem
    *:not(.redclolr)
      color #333
    p
      setFontsize(16px)
    .data
      margin-top cal(20) rem
      setFontsize(16px)
      display flex
      justify-content flex-start
      align-items center
      background #fff
      border-radius 5px
      padding cal(30) rem
      border bordercolor
      span
        flex 1 1 auto
        &:last-child
          color rgb(203, 147, 75)
          margin-right -0.4rem
          text-align right
    .part_one, .part_two
      background #fff
      border-radius 5px
      padding cal(30) rem
      padding-top 0
      padding-bottom 0
      margin-bottom cal(20) rem
      .title
        line-height cal(80) rem
        setFontsize(18px)
        margin-left -0.4rem
        margin-right -0.4rem
        padding 0 0.4rem
        border-bottom bordercolor
      .part_one_fir
        padding-top cal(30) rem
        padding-bottom cal(30) rem
        border-bottom bordercolor
        &:last-child
          border none
        p
          line-height 0.7rem
        .placeDesc
          setFontsize(12px)
          .span-icon
            width cal(34) rem
            height cal(34) rem
            background #cb934b
            border-radius 2px
            color #fff
            display inline-block
            line-height 0.47rem
            text-align center
            vertical-align 1px
            margin-right cal(20) rem
        .flex
          display flex
          justify-content space-around
          align-items center
          text-align center
          margin-top cal(51) rem
          margin-bottom cal(30) rem
          & > div
            flex 1
          .time
            setFontsize(24px)
          .timePlace
            setFontsize(12px)
        .flight
          color #999
          setFontsize(12px)

</style>
